<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'级别筛选详情'}"></three-title>
    <div class="layerRtb-scroll thinScroll" >
        <!-- <div class="analyItem">
            <p class="analyItemTit tx-center">搜索</p>
            <div class="analyItemCon">
                 <p class="col-md-2">
                  项目金额：
                </p>
                <p class="col-md-5">
                   <el-input placeholder="请输入项目金额" @keyup.enter.native="getManagerByContract" v-model="money"></el-input>
                </p>
            </div>
        </div> -->
        <div class="" style="width: 100%" v-scrollHeight = "30">
        <table class="levelTable">
          <thead>
            <tr>
                <th width="4%">序号</th>
                <th width="10%">姓名</th>
                <th width="8%">类型</th>
                <th width="8%">级别</th>
                <th width="8%">在施额/万</th>
                <th width="6%">投诉</th>
                 <th width="6%">拒单</th>
                  <th width="6%">退单</th>
                <th width="8%">未接天数</th>
                <th width="8%">入职月数</th>
                <th width="6%">接单</th>
                <th width="5%">接单分</th>
                <th width="12%">在施区</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in  tableList" :key="index">
              <td>{{index+1}}</td>
              <td>{{item.user_name}}</td>
              <td>{{item.projectTypeName}}</td>
              <td>{{item.tradition_level}}</td>
              <td>{{item.publishMoney/10000|toFixed(2)}}</td>
              <td>{{item.tsInt}}</td>
               <td>{{item.rejectScope/5}}</td>
                <td>{{item.tuiScope/8}}</td>
              <td>{{item.recentTime}}</td>
              <td>{{item.seniorityMonth}}</td>
              <td>{{item.recentNum}}</td>
              <td v-if="selectparm===2" >{{item.dqorderScope}}</td>
              <td v-else-if="selectparm===6">{{item.levelOrderScope}}</td>
              <td v-else-if=" selectparm===7">{{item.zjdNumOrderScope|toFixed(2)}}</td>
              <td v-else-if=" selectparm===8">{{item.jdorderScope}}</td>
              <td v-else-if=" selectparm===9">{{item.duaDayorderScope}}</td>
              <td v-else-if=" selectparm===10">{{item.tsInt}}</td>
              <td v-else-if=" selectparm===11">{{item.rejectScope}}</td>
               <td v-else-if=" selectparm===12">{{item.tuiScope}}</td>
              <td v-else>{{item.orderscope}}</td>
              <td>{{item.subareaName}}</td>
            </tr>
          </tbody>
        </table>
        </div>
    </div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { findNotApplicableOverBack } from '../../Resources/Api/index'

export default {
    data () {
        return {
            tableList: [], // 存表格数据,
            selectparm: 0
        }
    },
    created () {
        this.findNotApplicableOverBack()
        this.selectparm = this.$route.query.selectparm
    },
    methods: {
        // 获取表格数据
        findNotApplicableOverBack () {
            let parms = {
                areaId: this.twoToThreeInfo.hasOwnProperty('cityValue') && this.twoToThreeInfo.cityValue !== '' ? Number(this.twoToThreeInfo.cityValue) : Number(this.leftInfo.dq_id),
                projectType: this.twoToThreeInfo.hasOwnProperty('typeValue') && this.twoToThreeInfo.typeValue !== '' ? Number(this.twoToThreeInfo.typeValue) : 0,
                projectMoney: this.twoToThreeInfo.hasOwnProperty('moneyValue') && this.twoToThreeInfo.moneyValue !== '' ? Number(this.twoToThreeInfo.moneyValue) : 0,
                dqIds: this.twoToThreeInfo.hasOwnProperty('areaValue') && this.twoToThreeInfo.areaValue !== '' ? Number(this.twoToThreeInfo.areaValue) : ''
            }
            findNotApplicableOverBack(parms).then(result => {
                if (result.data.StatusCode === 0) {
                    this.tableList = result.data.Body[0]
                    this.finterTable()
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        // 排序
        compare (prop) {
            // 从大到小
            return function (a, b) {
                return b[prop] - a[prop]
            }
        },
        // 筛选 表格
        finterTable () {
            const currentIndex = this.$route.query.selectparm // 当前路由的Index
            switch (Number(currentIndex)) {
            case 0: // 结果
                this.tableList.sort(this.compare('orderscope'))
                break
            case 2: // 分司
                this.tableList.sort(this.compare('dqorderScope'))
                break
            case 6: // 级别分
                this.tableList.sort(this.compare('levelOrderScope'))
                break
            case 7: // 在施额
                this.tableList.sort(this.compare('zjdNumOrderScope'))
                break
            case 8: // 接单个数
                this.tableList.sort(this.compare('jdorderScope'))
                break
            case 9: // 未接天数
                this.tableList.sort(this.compare('duaDayorderScope'))
                break
            case 10: // 投诉
                this.tableList.sort(this.compare('tsInt'))
                break
            case 11: // 拒单
                this.tableList.sort(this.compare('rejectScope'))
                break
            case 12: // 退单
                this.tableList.sort(this.compare('tuiScope'))
                break
            default:
                this.tableList = this.tableList
                break
            }
        }
    },
    computed: {
        ...mapGetters(['twoToThreeInfo', 'leftInfo'])
    },
    watch: {
        twoToThreeInfo () {
            this.findNotApplicableOverBack()
        },
        $route () {
            this.finterTable()
            this.selectparm = this.$route.query.selectparm
        }
    }
}
</script>
<style>
.levelTable {
  width: 100%;
     /* height: 450px;
    overflow-y: auto; */
}
/* .levelTable td,
.levelTable th {
    width:calc(100% / 12)
} */
.layerRtb-scroll {
    width: 100%;
    height: 90%;
    padding: 0 10px;
}
</style>
